<template>
    <el-container>
    <el-header style="text-align: left; font-size: 45px;">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 45px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>新增</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    
    <el-main>
      <el-table :data="userListPage.filter(data => !search || data.userAccount.toLowerCase().includes(search.toLowerCase()))" v-loading="listLoading" border height="100%">
        <el-table-column prop="id" label="Id" width="120"></el-table-column>
        <el-table-column prop="userAccount" label="账号名" width="100"></el-table-column>
        <el-table-column prop="userName" label="用户昵称" width="120"></el-table-column>
        <el-table-column prop="userPhone" label="电话" width="140"></el-table-column>
        <el-table-column prop="userEmail" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="userProfile" label="简介" width="260"></el-table-column>
        <!-- <el-table-column prop="name" label="注册时间" width="120"></el-table-column> -->
        <el-table-column align="center" width="340">
            <!-- 报错的原因是vetur的eslint检查没有关闭 -->
            <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入账户名搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <!-- <el-button
                    size="mini"
                    type="danger"on
                    @click="handleDelete(scope.$index, scope.row)" 
                    v-on="checkUserState(row)" 
                    >{{userState}}</el-button> -->
                <el-switch
                  v-model="scope.row.ban"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="已启用"
                  inactive-text="已禁用"
                  :active-value="1"
                  :inactive-value="0"
                  @change="handleState($event,scope.row)">
                </el-switch>
            </template>
        </el-table-column>
      </el-table>

        <el-pagination v-show="total>0" 
        :total="total" 
        background 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[15, 30, 50, 100]"
        :page-count="pageCount" 
        :page.sync="listQuery.page" 
        :limit.sync="listQuery.limit" />

    </el-main>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <!-- <el-form-item label="Id" prop="id">
          <el-select v-model="temp.id" class="filter-item" placeholder="Please select">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="账户名" prop="userAccount">
          <el-input v-model="temp.userAccount"/>
        </el-form-item>
        <el-form-item label="用户昵称" prop="userName">
          <el-input v-model="temp.userName" />
        </el-form-item>
        <el-form-item label="用户简介" prop="userEmail">
          <el-input v-model="temp.userProfile" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <!-- <el-alert
    title="警告"
    type="warning"
    effect="dark"
    description="将确认删除用户信息！点击警告将消失"
    show-icon>
  </el-alert> -->

  </el-container>


</template>

<script>
import {setCookie,getCookie} from '../../assets/js/cookie.js'
import {getUserList, updateUserInfo,changeUserState} from '@/api/user.js'
import Axios from 'axios'
export default {
    created(){
      this.checkLogin()
    },
    mounted(){
        // this.getList()
    },
    data(){
        return{
            search:'',
            tableData:[],
            total:0,
            currentPage:1,
            pageCount:15,
            pageSize:15,
            pageVal:1,
            listQuery: {
              page: 1,
              limit: 15,
              importance: undefined,
              title: undefined,
              type: undefined,
              sort: '+id'
            },
            listLoading:false,
            userList:[],
            userListPage:[],
            dialogFormVisible:false,
            temp:{
              userAccount:'',
              userName:'',
              userPhone:'',
              userEmail:'',
              userProfile:'',
            },
            textMap:{
              update:'编辑',
              create:'创建'
            },
            banPick:{
              ban:'禁用',
              pick:'启用',
            },
            switchValue:true,
            userState:'',
            dialogStatus:'',
            warningAlertVisible:'false',
        }
    },
    methods:{
        //检测是否登录
        checkLogin(){
          if(getCookie('adminAccount').length !=0){
            this.getList()
          }else{
            this.$router.replace({path:'/login'})
          }
        },
      success(){
        this.$message({
          message: '操作成功',
          type: 'success'
        });
      },
      error(){
        this.$message.error('错误,操作失败')
      },
      getList(){
        this.listLoading = true
        getUserList().then(response =>{
            this.userList = response.data
            this.tableData = this.userList
            this.userListPage = this.userList
            this.total = this.userList.length
            console.log(this.userList)
            console.log(this.tableData)
            var val = 1
            this.handleCurrentChange(val)
            setTimeout(() =>{
                this.listLoading = false
            },1.5 * 1000)
        })
      },
      handleEdit(index, row) {
            console.log(index, row)
            this.temp = Object.assign({},row)
            // console.log(this.temp)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
      },
      updateData(){
        console.log(this.temp)
            updateUserInfo(this.temp).then(response =>{
              console.log(this.temp)
              console.log(response.data);
              console.log(response.status);
              console.log(response.statusText);
              console.log(response.headers);
              console.log(response.config);
              if(response.data = 1){
                this.success()
                this.dialogFormVisible = false
              }else{
                this.error()
              }
            })
      },
      //使用[禁用,启用]状态来代替delete
      // handleDelete(index, row) {
      //       console.log(index, row)
      //       var c = confirm("警告！你将删除该用户！请确认")
      //       if(c = true){
      //         alert("已确认删除")
      //       }else{
      //         alert("已取消删除")
      //       }
      // },
      //控制用户ban、pick状态
      handleState(e,row){
        console.log(row.ban)
        var c = false
        let data = {"userState":e,"userAccount":row.userAccount}
        changeUserState(data).then(response => {
          console.log(response)
          if(response.status == 200 || response.data == 1){
            alert("已更改用户启用状态")
          }else{
            alert("操作未生效，请刷新后重试")
          }
        })
        // if(c == true){
        //   alert("已确认删除")
        //   console.log(row)
        //   console.log("改变的状态状态:",e,"传递的数据中也被修改为:",row.ban)
        // }else{
        //   alert("已取消删除")
        //   console.log(row)
        //   console.log("改变的状态状态:",e,"传递的数据中也被修改为:",row.ban)
        // }
      },
      //检查用户ban、pick状态
      //该方法错误，应该在v-model的value处直接采用scope.row.ban
      checkUserState(row){
        console.log(row)
        if(row.ban === 1){
          this.userState = "已启用"
        }else{
          this.userState = "已禁用"
        }
      },
      // 每页的条目数
      handleSizeChange(val){
        console.log('每页'+{val}+'条')
            this.getList()
        },
        //跳转到某一页时的逻辑操作
      handleCurrentChange(val){
            console.log('当前在第'+val+'页')
            console.log(val)
            this.pageVal=val
            console.log(this.pageVal)
            if(this.pageVal==1){
                this.userListPage=this.userList.slice(0,this.pageVal*this.pageSize)
                console.log(this.userListPage)
                console.log("if生效")
            }else{
                this.userListPage=this.userList.slice((this.pageVal-1)*this.pageSize,this.pageVal*this.pageSize)
                console.log(this.userListPage)
                console.log("else生效")
            }
            // this.resourceInformation=this.allResourceInformation.slice(10,20)
            console.log(this.userList)
            // this.getSearchResult()
        }
    }
}
</script>

<style scoped>

</style>